<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>详情页</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/proList.css"/>
    <link rel="stylesheet" type="text/css" href="css/comment.css">
</head>
<body>
<div class="head">
    <div  th:replace="common :: head" ></div>

</div>
<div class="address">
    <div class="wrapper clearfix"><a href="/">首页</a><span>/</span><a
            href="javascript:void(0)" th:text="${category.parentCategory.name}"></a><span>/</span><a
            th:href="${category.page}" th:text="${category.name}"></a>
    </div>
</div><!-----------------------Detail------------------------------>
<div th:if="${goods.isputaway==false}">
    <center style="color: red;margin-top: 100px;font-size: 20px">该商品已下架</center>
</div>
<div class="detCon"  th:if="${goods.isputaway}">
    <div class="proDet wrapper">
        <div class="proCon clearfix">
            <div class="proImg fl"><img class="det" th:src="${goods.image}"/>
                <div class="smallImg clearfix"><img th:src="${goods.image}"
                                                    th:data-src="${goods.image}">
                    <img th:each="goodbo:${goods.goodsBos}" th:src="${goodbo.image}" th:data-src="${goodbo.image}">

                </div>
            </div>
            <div class="fr intro">
                <div class="title">
                    <p th:text="${goods.title}"></p><span th:text="${'￥'+goods.price}"></span></div>
                <div class="proIntro"><p>颜色分类</p>
                    <div class="smallImg clearfix categ">
                        <p th:each="goodBo:${goods.goodsBos}" class="fl"><img
                               th:name="${goodBo.id}" th:id="${goods.id}" onclick="purchase(this.id,this.name,'','pp')" width="25"
                                height="40"
                                th:src="${goodBo.image}"
                                th:alt="${goodBo.type}"
                                th:data-src="${goodBo.image}"></p>
                    </div>
                    <p>数量&nbsp;&nbsp;库存<span th:text="${goods.repertory}"></span>件</p>
                    <div class="num clearfix"><img class="fl sub" src="img/temp/sub.jpg"><span class="fl" id="number"
                                                                                               contentEditable="true">1</span><img
                            class="fl add" src="img/temp/add.jpg">
                        <p class="please fl">请选择商品属性!</p></div>
                </div>
                <div class="btns clearfix">
                        <p class="buy fl" th:id="${session.portalUser}" onclick="purchase('','','1',this.id)">立即购买</p>
                        <p class="cart fr" th:id="${session.portalUser}" onclick="purchase('','','0',this.id)">加入购物车</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="introMsg wrapper clearfix" th:if="${goods.isputaway}">
    <div class="msgL fl">
        <div class="msgTit clearfix"><a class="on">商品详情</a><a>所有评价</a></div>
        <div class="msgAll">
            <div class="msgImgs"><img th:src="${goods.image}" width="947" height="700"><img
                    th:each="goodbo:${goods.goodsBos}" width="947" height="700" th:src="${goodbo.image}"></div>
            <div class="eva">
                <div id="comment">
                    <div th:each="comment:${comments}" th:if="${comment.pid==0 }" class="per clearfix">
                        <img class="fl" width="40" height="40" th:src="${comment.user.header_url}">
                        <div class="perR fl"><p th:text="${comment.user.username}"></p>
                            <p th:text="${comment.info}"></p>
                            <div class="clearfix">
                                <p th:if="*{comment.images!=null and #strings.length(comment.images)>10}"
                                   th:each="image:${comment.image}">
                                    <img width="50" height="50" th:src="${image}">
                                </p>
                            </div>
                            <p>
                                <span th:text="${#dates.format(comment.createtime,'yyyy年MM月dd日HH:mm')}"></span>
                                <span th:text="${'颜色:'+comment.goodsBoType}"></span>
                                <a href="javascript:void(0)" style="margin-left: 20px;color: red"
                                   th:name="${comment.id+','+goods.id}" onclick="delcomment(this.name)"
                                   th:if="${session.portalUser!=null && session.portalUser.id==comment.uid}">删除</a>
                                <a href="javascript:void(0)" style="margin-left: 50px;color: red" th:name="${goods.id}"
                                   th:id="${comment.id+','+comment.user.username}" onclick="comment(this.name,this.id)"
                                   th:if="${session.portalUser!=null}">回复</a>
                            </p>


                        </div>
                        <div style="margin-left: 100px" id="sonComment" th:each="somComment:${comment.somComment}"
                             th:if="${comment.id==somComment.pid}">
                            <img class="fl" width="40" height="40" th:src="${comment.user.header_url}">
                            <span style="float: left;margin-top: 10px;margin-left: 10px"
                                  th:text="${somComment.user.username}"></span>
                            <span style="float: left;margin-top: 10px;margin-left: 30px"
                                  th:text="${somComment.info}"></span>
                            <div class="perR fl">
                                <p>
                                    <span th:text="${#dates.format(somComment.createtime,'yyyy年MM月dd日HH:mm')}"></span>
                                    <span th:text="${'颜色:'+somComment.goodsBoType}"></span>
                                    <a href="javascript:void(0)" style="margin-left: 20px;color: red"
                                       th:name="${somComment.id+','+goods.id}" onclick="delcomment(this.name)"
                                       th:if="${session.portalUser!=null && session.portalUser.id==somComment.uid}">删除</a>
                                    <a href="javascript:void(0)" style="margin-left: 50px;color: red"
                                       th:name="${goods.id}" th:id="${comment.id+','+somComment.user.username}"
                                       onclick="comment(this.name,this.id,this.class)"
                                       th:if="${session.portalUser!=null}">回复</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="button" class="bullet-button" th:if="${session.portalUser!=null}"
                        style="height: 30px;width: 50px" onclick="comment(this.name,'')" th:name="${goods.id}">评论
                </button>

            </div>
        </div>
    </div>
    <div class="msgR fr"><h4>为你推荐</h4>
        <div class="seeList"><a th:each="goods:${goodsList}" th:href="@{'/prodetail?id='+${goods.id}}">
            <dl>
                <dt><img width="150" height="200" th:src="${goods.image}"></dt>
                <dd th:text="${goods.title.substring(0,20)}"></dd>
                <dd th:text="${'￥'+goods.price}"></dd>
            </dl>
        </a>
        </div>
    </div>
</div>
<div class="mask"></div>
<div class="comment" style="margin-top:-200px ">
    <form onsubmit="return false">

        <textarea name="info" id="info" rows="" cols="" placeholder="评论信息" required></textarea>
        <button type="button" id="uploadBut" class="bottom" style="width: 200px;height: 30px" hidden="hidden"
                onclick="upload()">上传图片,上传一张或者多张
        </button>
        <input type="text" name="image" id="image" style=" display: none;"/>

        <div class="picDiv" hidden="hidden">
            <div class="addImages">

                <input type="file" class="file" id="uploadFilexxx" multiple="multiple"
                       accept="image/png, image/jpeg, image/gif, image/jpg">
                <div class="text-detail" onclick="upload()">
                    <span>+</span>
                    <p>点击上传</p>
                </div>
            </div>
        </div>
        <div class="bc"><input type="submit" value="保存" onclick="commentSum()"/><input type="button" value="取消"/></div>

    </form>
</div>

<div class="like"><h4>猜你喜欢</h4>
    <div class="bottom">
        <div class="hd"><span class="prev"><img src="img/temp/prev.png"></span><span class="next"><img
                src="img/temp/next.png"></span></div>
        <div class="imgCon bd">
            <div class="likeList clearfix">
                <div><a href="proDetail.html">
                    <dl>
                        <dt><img src="img/temp/like01.jpg"></dt>
                        <dd>【最家】复古文艺风玻璃花瓶</dd>
                        <dd>￥193.20</dd>
                    </dl>
                </a><a href="proDetail.html">
                    <dl>
                        <dt><img src="img/temp/like02.jpg"></dt>
                        <dd>【最家】复古文艺风玻璃花瓶</dd>
                        <dd>￥193.20</dd>
                    </dl>
                </a><a href="proDetail.html">
                    <dl>
                        <dt><img src="img/temp/like03.jpg"></dt>
                        <dd>【最家】复古文艺风玻璃花瓶</dd>
                        <dd>￥193.20</dd>
                    </dl>
                </a><a href="proDetail.html">
                    <dl>
                        <dt><img src="img/temp/like04.jpg"></dt>
                        <dd>【最家】复古文艺风玻璃花瓶</dd>
                        <dd>￥193.20</dd>
                    </dl>
                </a><a href="proDetail.html" class="last">
                    <dl>
                        <dt><img src="img/temp/like05.jpg"></dt>
                        <dd>【最家】复古文艺风玻璃花瓶</dd>
                        <dd>￥193.20</dd>
                    </dl>
                </a></div>
                <div><a href="proDetail.html">
                    <dl>
                        <dt><img src="img/temp/like01.jpg"></dt>
                        <dd>【最家】复古文艺风玻璃花瓶</dd>
                        <dd>￥193.20</dd>
                    </dl>
                </a><a href="proDetail.html">
                    <dl>
                        <dt><img src="img/temp/like02.jpg"></dt>
                        <dd>【最家】复古文艺风玻璃花瓶</dd>
                        <dd>￥193.20</dd>
                    </dl>
                </a><a href="proDetail.html">
                    <dl>
                        <dt><img src="img/temp/like03.jpg"></dt>
                        <dd>【最家】复古文艺风玻璃花瓶</dd>
                        <dd>￥193.20</dd>
                    </dl>
                </a><a href="proDetail.html">
                    <dl>
                        <dt><img src="img/temp/like04.jpg"></dt>
                        <dd>【最家】复古文艺风玻璃花瓶</dd>
                        <dd>￥193.20</dd>
                    </dl>
                </a><a href="proDetail.html" class="last">
                    <dl>
                        <dt><img src="img/temp/like05.jpg"></dt>
                        <dd>【最家】复古文艺风玻璃花瓶</dd>
                        <dd>￥193.20</dd>
                    </dl>
                </a></div>
            </div>
        </div>
    </div>
</div><!--返回顶部-->
<div th:replace="common :: gotop"></div>

<div th:replace="common :: footer"></div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
<script src="js/user.js" type="text/javascript" charset="utf-8"></script>
<script src="js/sweetalert.js"></script>
<script src="js/proDetail.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>